<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/css/swiper.min.css" />
		<script src="../js/js/swiper.min.js"></script>
		<script src="../jquery-2.2.3.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			#main {
				/*text-align: center;*/
				/*width: 910px;*/
				margin: 0 auto;
				/*border: 2px solid black;*/
			}
			
			a {
				text-decoration: none;
			}
			
			li {
				list-style: none;
			}
			
			#header {
				width: 910px;
				height: 100px;
				margin: 0 auto;
				position: relative;
				/*background: url(../img/FEAF692865C98592E5E9384A5F338282.png) right  ;*/
			}
			
			#logo {
				position: absolute;
				top: 3px;
			}
			
			#nav {
				/*border: 1px solid black;*/
				width: 726px;
				height: 100px;
				position: absolute;
				left: 180px;
				top: 4px;
				background: url(../img/FEAF692865C98592E5E9384A5F338282.png) right center;
				/*background-color: rgb(34, 100, 64);*/
				/*border-radius: 5px;*/
			}
			
			#nav li {
				display: inline-block;
				line-height: 33px;
				margin-left: 50px;
				margin-top: 33px;
			}
			
			#nav a {
				color: white;
				margin-left: 8px;
			}
			
			#nav a:hover {
				color: gold;
			}
			
			.last {
				width: 146px;
				background: url(../img/menu.jpg) right;
			}
			
			#drop-menu {
				display: none;
				z-index: 10;
				position: absolute;
				width: 200px;
				top: 72px;
				left: 350px;
				background: rgb(12, 162, 81);
				font-size: 13px;
				border: 2px solid darkgrey;
			}
			
			#drop-menu li {
				height: 30px;
				padding-left: 10px;
			}
			
			#drop-menu a {
				color: white;
				line-height: 30px;
			}
			
			#top {
				width: 730px;
				height: 30px;
				position: absolute;
				top: 10px;
				right: 10px;
			}
			
			#language {
				position: absolute;
				right: 0;
				z-index: 10;
			}
			
			#top p {
				font-size: 10px;
				position: absolute;
				left: -20px;
				z-index: 2;
			}
			
			#language a {
				color: black;
				font-size: 13px;
			}
			
			#inter {
				width: 200px;
				height: 25px;
			}
			#middle{
				width: 910px;
				margin: 0 auto;
				margin-top: 20px;
				/*height: 530px;*/
			}
			#middleLeft{
				width: 596px;
				float: left;
			}
			#middleRight{
				width: 291px;
				/*height: 451px;*/			
				float: right;
			}
			#middleRight a{
				line-height: 40px;
				color: green;
				font-size: 20px;
				margin-left: 10px;	
			}
			#middleRight img{
				float: right;
				margin-top: 10px;
			}
			#middleRight ul li ul{
				display: none;
			}
			#bottom {				
				width: 910px;
				height: 300px;
				margin: 0 auto;
				clear: both;
			}			
			#bLeft {
				float: left;
			}
			
			#bRight {
				float: right;
			}			
			#codeImg {
				display: none;
				z-index: 5;
				position: absolute;
				top: 410px;
				right: 470px;
			}
			
			#b-top {
				clear: both;
				width: 350px;							
				margin: 0 auto;
				font-size: 10px;
			}
			
			#b-bottom {
				width: 350px;
				clear: both ;
				font-size: 10px;
				margin: 0 auto;
				margin-top: 20px;
			}
			#b-bottom p{
				text-align: center;
			}
			
			.valueList{
				font-size: 13px;
			}	
		</style>
	</head>

	<body>
		<!--全局div-->
		<div id="main">
			<div id="header">
				<a href="###" id="logo"><img src="../img/logo.jpg" /></a>
				<div id="top">
					<p>中国</p>
					<div id="language">
						<select name="" id="inter">
							<option value="">select language</option>
							<option value="">Chinese</option>
							<option value="">English</option>
						</select> 丨
						<a href="###">进入全球官网</a>
					</div>
				</div>
				<div id="nav">
					<ul>
						<li>
							<a href="###">新闻动态</a>
						</li>
						<li id="drop">
							<a href="###">美食与营养</a>
						</li>
						<li>
							<a href="###">加盟流程</a>
						</li>
						<li>
							<a href="###">关于我们</a>
						</li>
						<li class="last">
							<a href="###">快餐店位置查询</a>
						</li>
					</ul>
				</div>
				<!--美食与营养下拉菜单-->
				<div id="drop-menu">
					<ul>
						<li>
							<a href="###">超值 Value</a>
						</li>
						<hr />
						<li>
							<a href="###">经典 Classic</a>
						</li>
						<hr />
						<li>
							<a href="###">精选 Premium</a>
						</li>
						<hr />
						<li>
							<a href="###">低脂 Low Fat</a>
						</li>
						<hr />
						<li>
							<a href="###">百味卷 Wrap</a>
						</li>
						<hr />
						<li>
							<a href="###">沙拉 Salad</a>
						</li>
						<hr />
						<li>
							<a href="###">聚餐服务 Catering</a>
						</li>
						<hr />
						<li>
							<a href="###">饮料和小食 Drinks Sides</a>
						</li>
						<hr />
						<li>
							<a href="###">早餐 Breakfast</a>
						</li>
						<hr />
						<li>
							<a href="###">营养 Nutrition</a>
						</li>
						<hr />
						<li>
							<a href="###">如何点餐 How To Order</a>
						</li>
					</ul>
				</div>
			</div>
			<!--中间-->
			<div id="middle">
				<div id="middleLeft">
					<img src="../img 7/8D6DF39D-DA23-43B0-AF9C-F8CE628BA66A.jpeg"/>
				</div>
				<div id="middleRight">
					<ul>
						<li><a href="###">超值 Value</a><img src="../img 7/jian.png"/>
							<ul class="valueList1" style="display: none;">
								<li><span>意大利香辣 Spicy Italian</span></li>
								<li><span>培根 B.L.T</span></li>
								<li><span>火腿 Ham</span></li>
								<li><span>新鲜蔬菜 Veggie Delite</span></li>
							</ul>
						</li><hr />
						<li><a href="###">经典 Classic</a><img src="../img 7/jian.png"/>
						<ul class="valueList" style="display: none;">
							<li><span>意大利经典 Italian B.M.T.™</span></li>
                            <li><span>意大利香肠 Italian Sausage</span></li>
                            <li><span>香烤鸡排 Roasted Chicken</span></li>
                            <li><span>火鸡胸 Turkey Breast</span></li>
                            <li><span>日式照烧鸡 Chicken Teriyaki</span></li>
						</ul>
						</li><hr />
						<li><a href="###">精选 Premium</a><img src="../img 7/jian.png"/>
						      <ul class="valueList" style="display: none;">
						      	<li><span>金枪鱼 Tuna</span></li>
                                <li><span>香热奇士 Subway Melt</span></li>
                                <li><span>香烤牛肉 Roast Beef</span></li>
                                <li><span>奇士牛排 Steak & Cheese</span></li>
                                <li><span>百味俱乐部 Subway Club™</span></li>
						      </ul>
						</li><hr />
						<li><a href="###">低脂 Low Fat</a><img src="../img 7/jian.png"/>
							<ul class="valueList" style="display: none;">
								<li><span>火腿 Ham</span></li>
								<li><span>火鸡胸 Turkey Breast</span></li>
                                <li><span>香烤鸡排 Roasted Chicken</span></li>
                                <li><span>香烤牛肉 Roast Beef</span></li>
                                <li><span>百味俱乐部 Subway Club™</span></li>
							</ul>	
						</li><hr />
						<li><a href="###">百味卷 Wrap</a></li><hr />
						<li><a href="###">沙拉 Salad</a></li><hr />
						<li><a href="###">聚餐服务 Catering</a><img src="../img 7/jian.png"/>
						   <ul class="valueList" style="display: none;">
						   	      <li><span> 三明治拼盘 Sandwich Platter</span></li>
                                <li><span>甜饼拼盘 Cookie Platter</span></li>
                                <li><span>巨型三明治 Giant Sub</span></li>
						   </ul>
						</li><hr />
						<li><a href="###">饮料和小食 Drinks & Sides</a></li><hr />
						<li><a href="###">早餐 BREAKFAST</a></li><hr />
						<li><a href="###">营养 Nutrition</a><img src="../img 7/jian.png"/>
						    <ul class="valueList" style="display: none;">
						        <li><span>营养问与答 FAQ</span></li>
						    </ul>
						</li><hr />
						<li><a href="###">如何点餐 How To Order</a></li><hr />
					</ul>
				</div>
			</div>
			<!--下部-->
			<div id="bottom">
				<div id="bLeft">
					<a href="###"><img src="../img/home-box-1_CN.jpg" /></a>
					<a href="###"><img src="../img/home-box-2_CN.jpg" /></a>
					<a href="###"><img src="../img/home-box-3_CN.jpg" /></a>
				</div>
				<div id="bRight">
					<a href="###"><img src="../img/weibo_CN.jpg" /></a>
					<a href=""><img src="../img/weixin_CN.jpg" id="weChat" /></a>
					<img src="../img/code.png" id="codeImg" />
				</div>
				<div id="b-top">
					<a href="###">主页</a>丨
					<a href="###">菜单/营养</a> 丨
					<a href="###">如何加盟 </a> 丨
					<a href="###">关于我们</a> 丨
					<a href="###">快餐店位置查询</a>
					<br />
					<a href="###">联系我们</a> 丨
					<a href="###"> 使用条款</a> 丨
					<a href="###">隐私权政策</a> 丨
					<a href="###">SUBWAY Partners™</a>
				</div>
				<div id="b-bottom">
					SUBWAY® is a Registered Trademark of Subway IP Inc.
					<br />
					<p>®2016 Subway IP Inc.</p> 
				</div>
			</div>
		</div>
		<script>
			
			// 美食下拉菜单
			var dropMenu = document.getElementById("drop-menu");
			var drop = document.getElementById("drop");
			var weChat = document.getElementById("weChat");
			var codeImg = document.getElementById("codeImg");
			var theaArr = document.querySelectorAll("#drop-menu a");
			var btImgArr = document.querySelectorAll("#bottom img");
			var selOpition = document.querySelectorAll("#inter>option");
			
			// 下拉菜单
			drop.onmouseover = function() {
				dropMenu.style.display = "block";
				for(var i = 0; i < theaArr.length; i++) {
					theaArr[i].onmouseover = function() {
						this.style.color = "gold";
					}
					theaArr[i].onmouseout = function() {
						this.style.color = "";
					}
				}
			}
			dropMenu.onmouseleave = function() {
					dropMenu.style.display = "none";
			}
			// 二维码图片
			weChat.onmouseover = function() {
				codeImg.style.display = "block";
			}
			weChat.onmouseout = function() {
				codeImg.style.display = "none";
			}
			
			for (var i = 0; i < btImgArr.length; i++){
				btImgArr[i].onmouseenter = function(){
					this.style.background = "gold";
					
				}
			}
			
//	        	var liArr = document.querySelectorAll("#middleRight li")	;
//	        	var valueList = document.getElementsByClassName("valueList");
//	        for(var i = 0; i < liArr.length; i++){
	        		$("#middleRight li").click(function(){
	        			var thisChildren = this.children;
	        			if(thisChildren.length > 0){
	        				thisChildren[2].style.display = "block";
	        			}
	        		})  		
					
	        			
	        
		   
		    
		    
		
		</script>
	</body>

</html>
